<template>
  <div>
    <ocean :use="form"></ocean>
  </div>
</template>
<script lang="tsx" setup>
import { GlobalAPI, MiniConfigAPI } from '@/app/api';
import { useForm } from '@/ocean';
import { NUpload } from 'naive-ui';
import { computed, nextTick } from 'vue';
import { ref } from 'vue';
const { action, headers } = GlobalAPI.uploadFile();

const form = useForm();
const goodsList = ref([]);
const imageTextList = ref([]);
form.item('图片', 'image').define(() => <NUpload
  action={action}
  headers={headers}
  listType="image-card"
  max={1}
  accept="image/*"
  on-finish={(e) => onFinish(e)}
></NUpload>)
form.item('链接', 'url').input();
form.item('跳转类型', 'type').select({
  options: [{ label: '图文', value: "1" }, { label: '商品', value: "2" }],
});

const isArt = computed(() => form.model.type == '1');
const isGood = computed(() => form.model.type == '2');

form.item('选择图文', 'contentId', { show: isArt }).select({ options: imageTextList, labelField: 'text', valueField: 'id' })
form.item('选择商品', 'contentId', { show: isGood }).select({ options: goodsList, labelField: 'goodsName', valueField: 'id' })

const onFinish = (e) => {
  const res = JSON.parse(e.event.target.response);
  form.model.image = res.data;
}
let queryGoodsList = () => {
  MiniConfigAPI.queryAllGoods().then(res => {
    goodsList.value = res.data;
  });
};
let queryImageTextList = () => {
  MiniConfigAPI.getImagetext().then(res => {
    imageTextList.value = res.data;
  });
};



defineExpose({
  getModel() {
    return form.model
  }
})
queryGoodsList()
queryImageTextList()

</script>